<template>
  <div class="mainContent">
    <div class="mainBox">
      <div class="we"><h3>找回密码</h3></div>
      <div class="steps">
        <el-steps :active="active" finish-status="success" simple style="margin-top:20px;">
          <el-step title="输入账号" ></el-step>
          <el-step title="身份验证" ></el-step>
          <el-step title="重置密码" ></el-step>
        </el-steps>
      </div>
      <div class="formClass" v-if="ShowStep0">
        <el-form ref="form" :model="infoForm" label-width="auto">
          <el-form-item prop='phoneNum' class="Input">
            <el-input v-model="infoForm.phoneNum" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-radio v-model="chooseIorA" label="1" border style="width: 100%;">个人</el-radio>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-radio v-model="chooseIorA" label="2" border style="width: 100%;">单位</el-radio>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-input v-model="infoForm.captcha" placeholder="右侧图片内容"></el-input>
            </el-col>
            <el-col :span="11" :offset="2">
              <img :src="'data:image/jpeg;base64,'+vcaptchaImg" @click="getVcaptchaImg"></img>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleNext" type="primary" class="login-button" style="width: 100%;">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="formClass" v-if="ShowStep1">
        <el-form ref="form" :model="infoForm" label-width="auto">
          <el-form-item prop='phoneNum' class="Input">
            <el-input v-model="infoForm.phoneNum" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-col :span="10">
              <el-input placeholder="验证码" style="width:100%"></el-input>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-button type="warning" style="width:100%">获取短信验证码</el-button>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleNext" type="primary" class="login-button" style="width: 100%;">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="formClass" v-if="ShowStep2">
        <el-form ref="form" :model="infoForm" label-width="auto">
          <el-form-item prop='phoneNum' class="Input">
            <el-input v-model="infoForm.newPassword" placeholder="输入新密码"></el-input>
          </el-form-item>
          <el-form-item prop='phoneNum' class="Input">
            <el-input v-model="infoForm.VnewPassword" placeholder="再次确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset" type="primary" class="login-button" style="width: 100%;">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForgetPassword',
  data () {
    return {
      active: 0,
      infoForm: {
        phoneNum: '',
        captcha: '',
        newPassword: '',
        VnewPassword: '',
      },
      chooseIorA: '1',
      ShowStep0: true,
      ShowStep1: false,
      ShowStep2: false,
      vcaptchaImg: '',
    }
  },
  created() {
    this.active = 0;
  },
  methods: {
    handleNext(){
      console.log("next!");
      this.active++;
    },
    handleReset(){
      this.$message({
        showClose: true,
        message: '密码修改成功，即将跳转到登录界面。',
        type: 'success',
        offset: '350',
        duration: 3000,
        onClose: ()=> {
          this.$router.push({path:'/user/login'})
        }
      });
    },
    // 获取图片验证码
    getVcaptchaImg(){
      this.api.getcaptcha().then(res=>{
        console.log(res);
        if(res.success === true && res.code===200){
          this.infoForm.captchaid = res.data.captcha_id;
          this.vcaptchaImg = res.data.captcha
        }
      })
    },
  },
  computed: {

  },
  watch: {
    active(newVal,oldVal){
      if(newVal == 0){
        this.ShowStep0 = true;
        this.ShowStep1 = false;
        this.ShowStep2 = false;
      }
      if(newVal == 1){
        this.ShowStep0 = false;
        this.ShowStep1 = true;
        this.ShowStep2 = false;
      }
      if(newVal == 2){
        this.ShowStep0 = false;
        this.ShowStep1 = false;
        this.ShowStep2 = true;
        console.log(this.active);
      }
    },
  },
}
</script>

<style scoped>
.mainContent{
  background-color: orange;
  padding: 80px 320px;
}
.mainBox{
  background-color: white;
  padding: 10px 30px 0px 30px;
}
.we{
  border-bottom: 1px solid darkcyan;
}
.steps{
  width: 70%;
  margin: auto;
}
.Input{
  width: 340px;
}
.formClass{
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

